<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all" />
</head>

<body layadmin-themealias="default">
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body" pad15="">
                        <div class="layui-form" wid100="" lay-filter="">
                            <div class="layui-form-item">
                                <label class="layui-form-label">{:Lang('live_category')}</label>
                                <div class="layui-input-inline">
                                    <select id="categoryid" name="sport_id" lay-filter="categoryid">
                                        <option value="">{:Lang('all')}</option>
                                        <option value="1">{:Lang('football')}</option>
                                        <option value="2">{:Lang('basketball')}</option>
                                        <option value="5">其它</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item sport">
                                <label class="layui-form-label">赛事名称</label>
                                <div class="layui-input-inline" style="width: 400px">
                                    <input type="text" name="comp_title" value="" placeholder="" class="layui-input"
                                        lay-verify="required" maxlength="255">
                                </div>
                            </div>
                            <div class="layui-form-item sport">
                                <label class="layui-form-label">开始时间</label>
                                <div class="layui-input-inline" style="width: 400px">
                                    <input lay-verify="required" type="text" name="start_time" placeholder="开始时间"
                                        autocomplete="off" class="layui-input" id="start_time_input" />
                                </div>
                            </div>
                            <div class="layui-form-item sport">
                                <label class="layui-form-label">主队名称</label>
                                <div class="layui-input-inline" style="width: 400px">
                                    <input type="text" name="home" value="" placeholder="" class="layui-input"
                                        lay-verify="required" maxlength="255">
                                </div>
                            </div>
                            <div class="layui-form-item" id="img1">
                                <label class="layui-form-label">主队LOGO</label>
                                <div class="layui-input-inline" style="width: 400px">
                                    <input name="home_logo" lay-verify="required" id="HomeLogo" placeholder="" value=""
                                        class="layui-input" />
                                </div>
                                <div class="layui-input-inline layui-btn-container" style="width: auto">
                                    <button type="button" class="layui-btn layui-btn-primary" id="HomeLogoUpload">
                                        <i class="layui-icon">&#xe67c;</i>上传图片
                                    </button>
                                </div>
                            </div>
                            <div class="layui-form-item sport">
                                <label class="layui-form-label">客队名称</label>
                                <div class="layui-input-inline" style="width: 400px">
                                    <input type="text" name="away" value="" placeholder="" class="layui-input"
                                        lay-verify="required" maxlength="255">
                                </div>
                            </div>
                            <div class="layui-form-item" id="img1">
                                <label class="layui-form-label">客队LOGO</label>
                                <div class="layui-input-inline" style="width: 400px">
                                    <input name="away_logo" lay-verify="required" id="AwayLogo" placeholder="" value=""
                                        class="layui-input" />
                                </div>
                                <div class="layui-input-inline layui-btn-container" style="width: auto">
                                    <button type="button" class="layui-btn layui-btn-primary" id="AwayLogoUpload">
                                        <i class="layui-icon">&#xe67c;</i>上传图片
                                    </button>
                                </div>
                            </div>
                            <div class="layui-form-item sport">
                                <label class="layui-form-label">{:Lang('add_anchor')}</label>
                                <div class="layui-input-inline" style="width: 400px">
                                    <select name="anchor_id[]" id="" lay-filter="" lay-search="">
                                        <option value="">{:Lang('enter_name_to_search')}</option>
                                        {volist name="anchors" id="vo"}
                                        <option value="{$vo.id}">{$vo.id} - {$vo.nick_name}</option>
                                        {/volist}
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item sport">
                                <label class="layui-form-label">{:Lang('add_anchor')}</label>
                                <div class="layui-input-inline" style="width: 400px">
                                    <select name="anchor_id[]" id="" lay-filter="" lay-search="">
                                        <option value="">{:Lang('enter_name_to_search')}</option>
                                        {volist name="anchors" id="vo"}
                                        <option value="{$vo.id}">{$vo.id} - {$vo.nick_name}</option>
                                        {/volist}
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item sport">
                                <label class="layui-form-label">{:Lang('add_anchor')}</label>
                                <div class="layui-input-inline" style="width: 400px">
                                    <select name="anchor_id[]" id="" lay-filter="" lay-search="">
                                        <option value="">{:Lang('enter_name_to_search')}</option>
                                        {volist name="anchors" id="vo"}
                                        <option value="{$vo.id}">{$vo.id} - {$vo.nick_name}</option>
                                        {/volist}
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item sport">
                                <label class="layui-form-label">{:Lang('add_anchor')}</label>
                                <div class="layui-input-inline" style="width: 400px">
                                    <select name="anchor_id[]" id="" lay-filter="" lay-search="">
                                        <option value="">{:Lang('enter_name_to_search')}</option>
                                        {volist name="anchors" id="vo"}
                                        <option value="{$vo.id}">{$vo.id} - {$vo.nick_name}</option>
                                        {/volist}
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item sport">
                                <label class="layui-form-label">{:Lang('add_anchor')}</label>
                                <div class="layui-input-inline" style="width: 400px">
                                    <select name="anchor_id[]" id="" lay-filter="" lay-search="">
                                        <option value="">{:Lang('enter_name_to_search')}</option>
                                        {volist name="anchors" id="vo"}
                                        <option value="{$vo.id}">{$vo.id} - {$vo.nick_name}</option>
                                        {/volist}
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item sport">
                                <label class="layui-form-label">{:Lang('add_anchor')}</label>
                                <div class="layui-input-inline" style="width: 400px">
                                    <select name="anchor_id[]" id="" lay-filter="" lay-search="">
                                        <option value="">{:Lang('enter_name_to_search')}</option>
                                        {volist name="anchors" id="vo"}
                                        <option value="{$vo.id}">{$vo.id} - {$vo.nick_name}</option>
                                        {/volist}
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item sport">
                                <label class="layui-form-label">{:Lang('add_anchor')}</label>
                                <div class="layui-input-inline" style="width: 400px">
                                    <select name="anchor_id[]" id="" lay-filter="" lay-search="">
                                        <option value="">{:Lang('enter_name_to_search')}</option>
                                        {volist name="anchors" id="vo"}
                                        <option value="{$vo.id}">{$vo.id} - {$vo.nick_name}</option>
                                        {/volist}
                                    </select>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <div class="layui-input-block text-center">
                                    <button class="layui-btn" lay-submit="" lay-filter="live-add">
                                        {:Lang('submit')}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="/layuiadmin/layui/layui.js"></script>
    <script src="/assets/cos-js-sdk-v5/cos-js-sdk-v5.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="/assets/vod-js-sdk-v6/vod-js-sdk-v6.js"></script>
    <script src="//imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.3.3.js" charset="utf-8"></script>
    <script>
        function minDate() {
            var min = new Date();
            return (
                min.getFullYear() + "-" + (min.getMonth() + 1) + "-" + min.getDate()
            );
        }

        function maxDate() {
            var max = new Date();
            max.setDate(max.getDate() + 7);
            return (
                max.getFullYear() + "-" + (max.getMonth() + 1) + "-" + max.getDate()
            );
        }

        layui.use("laydate", function () {
            let laydate = layui.laydate;
            //执行一个laydate实例
            laydate.render({
                elem: "#schedule_time", //指定元素
                type: "datetime",
                format: "yyyy-MM-dd HH:mm",
                min: minDate(),
                max: maxDate(),
            });
        });

        layui
            .config({
                base: "/layuiadmin/", //静态资源所在路径
            })
            .extend({
                index: "lib/index", //主入口模块
            })
            .use(["index", "form", "admin", "live", "upload"], function () {
                var $ = layui.$,
                    form = layui.form,
                    upload = layui.upload,
                    admin = layui.admin;
                laydate = layui.laydate;

                laydate.render({
                    elem: "#start_time_input",
                    type: "datetime",
                });

                //监听直播类型
                form.on("select(categoryid)", function (data) {
                    let select = $("#matchid");
                    let sport_id = data.value;

                    // 下拉选择置空
                    select.empty();
                    form.render("select");
                    if (sport_id > 0) {
                        $.ajax({
                            url: "/admin/live/match_event",
                            type: "get",
                            data: { sport_id: sport_id },
                            dataType: "json",
                            success: function (result) {
                                select.removeAttr("disabled");
                                select.append(new Option("请输入赛事名称", ""));
                                $.each(result.data, function (index, item) {
                                    var se_title =
                                        item.home +
                                        "-" +
                                        item.away +
                                        "（比赛时间：" +
                                        item.match_time_str +
                                        "）";
                                    select.append(new Option(se_title, item.match_id));
                                });
                                form.render("select");
                            },
                        });
                    } else {
                        select.append(new Option("- - -", ""));
                        form.render("select");
                    }
                });

                form.on("submit(live-add)", function (obj) {
                    //提交
                    layer.load();
                    admin.req({
                        url: "/admin/live/preview_custom_add_handle",
                        data: obj.field,
                        success: function (res) {
                            layer.closeAll("loading");
                            if (res.code == 0) {
                                layer.msg(res.msg, { icon: 1 });
                                setTimeout(function () {
                                    window.location.reload();
                                }, 1200);
                            }
                        },
                        complete: function () {
                            layer.closeAll("loading");
                        },
                    });
                    return false;
                });

                var homeSrc = $('#HomeLogo');
                upload.render({
                    url: '/admin/index/noOperation'
                    , elem: '#HomeLogoUpload'
                    , auto: true
                    , choose: function (obj) {
                        layer.load();
                        var choosefile;
                        obj.preview(function (index, file, result) {
                            choosefile = file;
                        });
                        admin.req({
                            url: '/admin/index/signForCos'
                            , success: function (res) {
                                if (res.code == 0) {
                                    var cos = new COS({
                                        getAuthorization: function (options, callback) {
                                            var credentials = res.data.credentials;
                                            callback({
                                                TmpSecretId: credentials.tmpSecretId,
                                                TmpSecretKey: credentials.tmpSecretKey,
                                                XCosSecurityToken: credentials.sessionToken,
                                                ExpiredTime: res.data.expiredTime
                                            });
                                        }
                                    });
                                    cos.putObject({
                                        Bucket: res.data.bucket,
                                        Region: res.data.region,
                                        Key: 'images/' + res.data.filename + choosefile.name,
                                        Body: choosefile,
                                    }, function (err, data) {
                                        layer.closeAll('loading');
                                        if (err) {
                                            console.log(err);
                                            layer.msg("上传失败", { icon: 5 });
                                        } else {
                                            if (data.statusCode == 200) {
                                                homeSrc.val("https://" + data.Location);
                                                iconPreview.attr("value", homeSrc.val());
                                            } else {
                                                layer.msg("图片上传失败", { icon: 5 });
                                            }
                                        }
                                    });
                                } else {
                                    layer.closeAll('loading');
                                    layer.msg(res.msg, { icon: 5 });
                                }
                            },
                            complete: function () {
                                layer.closeAll('loading');
                            }
                        })
                    }
                });

                var awaySrc = $('#AwayLogo');
                upload.render({
                    url: '/admin/index/noOperation'
                    , elem: '#AwayLogoUpload'
                    , auto: true
                    , choose: function (obj) {
                        layer.load();
                        var choosefile;
                        obj.preview(function (index, file, result) {
                            choosefile = file;
                        });
                        admin.req({
                            url: '/admin/index/signForCos'
                            , success: function (res) {
                                if (res.code == 0) {
                                    var cos = new COS({
                                        getAuthorization: function (options, callback) {
                                            var credentials = res.data.credentials;
                                            callback({
                                                TmpSecretId: credentials.tmpSecretId,
                                                TmpSecretKey: credentials.tmpSecretKey,
                                                XCosSecurityToken: credentials.sessionToken,
                                                ExpiredTime: res.data.expiredTime
                                            });
                                        }
                                    });
                                    cos.putObject({
                                        Bucket: res.data.bucket,
                                        Region: res.data.region,
                                        Key: 'images/' + res.data.filename + choosefile.name,
                                        Body: choosefile,
                                    }, function (err, data) {
                                        layer.closeAll('loading');
                                        if (err) {
                                            console.log(err);
                                            layer.msg("上传失败", { icon: 5 });
                                        } else {
                                            if (data.statusCode == 200) {
                                                awaySrc.val("https://" + data.Location);
                                                iconPreview.attr("value", awaySrc.val());
                                            } else {
                                                layer.msg("图片上传失败", { icon: 5 });
                                            }
                                        }
                                    });
                                } else {
                                    layer.closeAll('loading');
                                    layer.msg(res.msg, { icon: 5 });
                                }
                            },
                            complete: function () {
                                layer.closeAll('loading');
                            }
                        })
                    }
                });

                function formatTimeStamp(time_stamp) {
                    const time = new Date(time_stamp * 1000);
                    const Y = time.getFullYear();
                    const M = (time.getMonth() + 1).toString().padStart(2, "0");
                    const D = time.getDate().toString().padStart(2, "0");
                    const h = time.getHours().toString().padStart(2, "0");
                    const m = time.getMinutes().toString().padStart(2, "0");
                    return `${Y}-${M}-${D} ${h}:${m}`;
                }
            });
    </script>
    <style>
        .laydate-time-list {
            padding-bottom: 0;
            overflow: hidden;
        }

        .laydate-time-list>li {
            width: 50% !important;
        }

        .laydate-time-list>li:last-child {
            display: none;
        }
    </style>
</body>

</html>